<template>
  <v-charts
    ref="echart"
    class="my-chart-wrapper"
    v-bind="$attrs"
    v-on="$listeners"
    :autoresize="autoresize"
  />
</template>

<script>
import VCharts from 'vue-echarts'
import { use } from 'echarts/core'
import 'echarts-gl'

import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart,
  LineChart,
  PieChart,
  MapChart,
  RadarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
  DataZoomComponent,
  GraphicComponent,
  PolarComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  PieChart,
  MapChart,
  RadarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
  GraphicComponent,
  PolarComponent,
  DataZoomComponent
])

export default {
  name: 'Chart',
  inheritAttrs: false,
  components: {
    VCharts
  },
  props: {
    autoresize: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    const proxyMethods = [
      'setOption',
      'getWidth',
      'getHeight',
      'getDom',
      'getOption',
      'resize',
      'dispatchAction',
      'convertToPixel',
      'convertFromPixel',
      'containPixel',
      'showLoading',
      'hideLoading',
      'containPixel',
      'getDataURL',
      'getConnectedDataURL',
      'clear',
      'dispose'
    ]
    this.$nextTick(() => {
      for (const m of proxyMethods) {
        this[m] = this.$refs.echart[m]
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.my-chart-wrapper {
  width: 100%;
  height: 100%;
}
</style>
